<template>
  <div>
    <div class="header">
      <el-form ref="form" :model="searchForm" class="from" size="small" label-position="left">
        <el-form-item label="所属辖区:" label-width="80px" suffix-icon="xxxx">
          <el-input v-model="searchForm.bench"></el-input>
        </el-form-item>
        <el-form-item label="分局名称:" label-width="80px">
          <el-select v-model="searchForm.name" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="padding-right:100px">
          <el-button type="primary">查询</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <h2>分局管理</h2>
      <div class="buttons">
        <el-button @click="addStationsData" type="primary">添加</el-button>
        <el-button>导入</el-button>
        <el-button type="primary" @click="exportExcel">导出</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%" :header-cell-style="headerStyle" :row-class-name="tableRowClassName" border id="stationsTable">
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column prop="bench" label="所属辖区" align="center">
        </el-table-column>
        <el-table-column prop="name" label="分局名称" align="center">
        </el-table-column>
        <el-table-column prop="name" label="所属加油站" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="getDetail(scope.row)">所属加油站</el-button>
          </template>
        </el-table-column>
        <el-table-column label="分局介绍" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="getDetail(scope.row)">查看介绍</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <el-dialog title="添加分局数据" :visible.sync="stationsForm.addStationsDataDialog" width="450px">
        <el-form :model="stationsForm" size="small" class="from">
          <el-form-item label="所属辖区" label-width="100px" style="width:100%;padding-right:0px">
            <el-input v-model="searchForm.name" suffix-icon="xxxx" placeholder="请选择"></el-input>
          </el-form-item>
          <el-form-item label="分局名称" label-width="100px" style="width:100%;padding-right:0px">
            <el-input v-model="searchForm.name" suffix-icon="xxxx" placeholder="请选择"></el-input>
          </el-form-item>
          <el-form-item label="分局介绍" label-width="100px" style="width:100%;padding-right:0px">
            <el-input v-model="searchForm.name" suffix-icon="xxxx" placeholder="请编辑" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="所属加油站" label-width="100px" style="width:100%;padding-right:0px">
            <el-input v-model="searchForm.name" suffix-icon="xxxx" placeholder="请编辑" type="textarea"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="stationsForm.addStationsDataDialog = false">取 消</el-button>
          <el-button type="primary" @click="stationsForm.addStationsDataDialog = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>



<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {

  data() {
    return {
      form: {},
      value: '',
      options: [],
      searchForm: {
        name: "",
        bench: ""
      },
      stationsForm: {
        addStationsDataDialog: false,
        name: '',
        fenju: '',
        juzhang: {
          name: '',
          dianhua: ''
        },
        guanliyuan: {
          name: '',
          dianhua: ''
        },
        dizhi: '',
        jindu: '',
        weidu: '',
        youzhanfaren: {
          name: '',
          lianxidianhua: '',
          zhengjianhao: '',
          shibiema: ''
        }
      },
      tableData: [{
        bench: '广州市',
        name: '清河分局',
        detail: '清河分局是xxxxxxxxxxxxxxxxxxx',
      }, {
        bench: '广州市',
        name: '测试分局',
        address: '测试分局是xxxxxxxxxxxxxxxxxxx'
      }, {
        bench: '东莞市',
        name: '测试分局',
        address: '测试分局是xxxxxxxxxxxxxxxxxxx',
      }, {
        bench: '东莞市',
        name: '麻城分局',
        address: '麻城分局是xxxxxxxxxxxxxxxxxxx'
      }]
    }
  },
  methods: {
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'warning-row';
      } else {
        return 'success-row';
      }
    },
    headerStyle() {
      return '  background: #eef9fe;'
    },
    getDetail(item) {
      console.log(item);
    },
    ToSalesStatistics(item) {
      this.$router.push(
        {
          path: '/stationsManagement/SalesStatistics',
          name: '/SalesStatistics',
          query: { name: item.name, id: item.id }
        }
      )
    },

    addStationsData() {
      this.stationsForm.addStationsDataDialog = true;
    },
    exportExcel() {
      var wb = XLSX.utils.table_to_book(document.querySelector('#stationsTable'))
      console.log(wb);
      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' }, { sheetRows: 5 })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'demo.xlsx')
      } catch (e) {
        alert("导出失败")
      }
      return wbout
    }
  },
}
</script>
<style lang="scss" scoped>
@import "../../style.css";
.header {
  padding: 30px;
  width: 100%;
}
.el-form-item {
  padding-right: 80px;
}
.el-form-item .el-select {
  width: 200px;
}
.el-form-item .el-input {
  width: 200px;
}
.table {
  padding: 30px;
  width: 100%;
}
.buttons {
  float: right;
  padding-bottom: 20px;
}
.title {
  float: left;
}
.from {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
</style>